<template>
    <div style="width:100%">
        <el-input style="width:100%" v-model="value" @input="$emit('update:modelValue', $event)" v-if="config.type == 'input'" :placeholder="config.placeholder || '请输入'" clearable></el-input>
        <el-select style="width:100%" v-model="value" @change="selectChange" v-if="config.type == 'select'" :placeholder="config.placeholder || '请选择'" clearable>
            <template v-if="config.enum">
                <el-option v-for="(item,index) in dict[config.enum]" :key="index" :label="item.text" :value="item.value"></el-option>
            </template>
            <template v-if="config.list">
                <el-option v-for="(item,index) in config.list" :key="index" :label="item[config.text]" :value="item[config.key]"></el-option>
            </template>
        </el-select>
        <el-date-picker style="width:100%;box-sizing:border-box"  @input="$emit('update:modelValue', $event)" @change="dateChange"  v-model="value" type="datetimerange" v-if="config.type == 'datetimerange'" :placeholder="config.placeholder || '请选择'" clearable></el-date-picker>
        <el-date-picker style="width:100%;box-sizing:border-box"  @input="$emit('update:modelValue', $event)" @change="dateChange" value-format="YYYY-MM-DD"  v-model="value" type="date" v-if="config.type == 'date'" :placeholder="config.placeholder || '请选择'" clearable></el-date-picker>

    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed ,onMounted } from 'vue'

import type {searchConfig}  from './model/index'
import systemStore from '@/store/modules/system'

const emit = defineEmits(['update:modelValue'])

const props = defineProps<{
    config: any,
    modelValue?: any
}>();

const value = ref<any>()

const selectChange = (val:any) => {
    emit('update:modelValue', val)
}

const dateChange = (val:any) => {
    emit('update:modelValue', val)
}

const dict = computed(() => {
    return systemStore().dict
})

watch(() => props.modelValue, (val:any) => {
    value.value = val
},{
    immediate:true
})
</script>
<style lang="scss">
.el-input__wrapper{
    width: 100%;
    box-sizing: border-box;
}
</style>